<template>
  <el-card style="margin: 10px">
    <el-row slot="header"> 试题录入 </el-row>
    <el-row :gutter="15">
      <el-form
        ref="perFormRef"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="99px"
        label-position="left"
      >
        <el-form-item label="学科:" prop="subject">
          <el-select
            v-model="formData.subject"
            placeholder="请选择"
            clearable
            :style="{ width: '40%' }"
            @change='getdirectorys'
          >
            <el-option
              v-for="(item, index) in subjectsList"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogue">
          <el-select
            v-model="formData.catalogue"
            placeholder="请选择"
            clearable
            :style="{ width: '40%' }"
          >
            <el-option
              v-for="(item, index) in directorysList"
              :key="index"
              :label="item.directoryName"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterprise">
          <el-select
            v-model="formData.enterprise"
            placeholder="请选择"
            clearable
            :style="{ width: '40%' }"
          >
            <el-option
              v-for="(item, index) in companyList"
              :key="index"
              :label="item.company"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="city">
          <el-select
            v-model="formData.city"
            placeholder="请选择"
            clearable
            :style="{ width: '20%' }"
            @change='getarea'
          >
            <el-option
              v-for="(item, index) in cityList"
              :key="index"
              :label="item"
              :value="index"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <el-select
            v-model="formData.area"
            placeholder="请选择"
            clearable
            :style="{ width: '20%' }"
          >
            <el-option
              v-for="(item, index) in areaList"
              :key="index"
              :label="item"
              :value="index"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select
            v-model="formData.direction"
            placeholder="请选择方向"
            clearable
            :style="{ width: '40%' }"
          >
            <el-option
              v-for="(item, index) in directionList"
              :key="index"
              :label="item"
              :value="index"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="types">
          <el-radio-group v-model="formData.types" size="medium">
            <el-radio
              v-for="(item, index) in questionTypeList"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              @change="changeFrame"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="formData.difficulty" size="medium">
            <el-radio
              v-for="(item, index) in difficultyList"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="questionStem">
          <quill-editor
            ref="myLQuillEditor"
            v-model="content"
            :options="editorOption"
            class="editor"
            @blur="onEditorBlur"
            @focus="onEditorFocus"
            @change="onEditorChange"
          >
            >
          </quill-editor>
        </el-form-item>
        <el-form-item label="选项:" v-if="!formData.types===3">
          <el-row style="margin-bottom: 20px" v-if="formData.types===1">
            <el-radio v-model="radio" :label="1"
              >A:
              <el-input style="width: 250px"></el-input>
              <el-button class="pic"
                >上传图片
                <i class="el-icon-circle-close icon"></i>
              </el-button>
            </el-radio>
          </el-row>
          <el-row style="margin-bottom: 20px" v-if="formData.types===2">
            <el-checkbox v-model="radio" :label="1"
              >A:
              <el-input style="width: 250px"></el-input>
              <el-button class="pic"
                >上传图片
                <i class="el-icon-circle-close icon"></i>
              </el-button>
            </el-checkbox>
          </el-row>
          <el-button type="danger" disabled>+增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="explanation">
          <quill-editor
            ref="myLQuillEditorRef"
            v-model="content2"
            :options="editorOption"
            class="editor"
            @blur="onEditorBlur"
            @focus="onEditorFocus"
            @change="onEditorChange"
          >
            >
          </quill-editor>
        </el-form-item>
        <el-form-item label="题目备注:">
          <el-input
            type="textarea"
            :rows="4"
            style="width: 40%"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="试题标签:">
          <el-select
            v-model="value"
            placeholder="请选择试题标签"
            clearable
            :style="{ width: '40%' }"
            multiple
          >
            <el-option
              v-for="(item, index) in tagsList"
              :key="index"
              :label="item.tagName"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </el-card>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

import { list as subjectsList } from '@/api/hmmm/subjects'
import { list as directorysList } from '@/api/hmmm/directorys'
import { list as companyList } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { list as tagsList } from '@/api/hmmm/tags'

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'link']
]

export default {
  name: 'QuestionsNew',
  components: { quillEditor },
  props: [],
  data () {
    return {
      value: '',
      textarea: '',
      radio: '1',
      content: '',
      content2: '',
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: ''
        // Some Quill optiosn...
      },
      formData: {
        subject: undefined,
        catalogue: undefined,
        enterprise: undefined,
        city: undefined,
        direction: undefined,
        types: 1,
        difficulty: 1,
        questionStem: undefined
      },
      rules: {
        subject: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        catalogue: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        enterprise: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        city: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        area: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        direction: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        types: [{
          required: true,
          message: '题型不能为空',
          trigger: 'change'
        }],
        difficulty: [{
          required: true,
          message: '难度不能为空',
          trigger: 'change'
        }],
        questionStem: [{
          required: true,
          message: '题干不能为空',
          trigger: 'change'
        }],
        explanation: [{
          required: true,
          message: '答案解析不能为空',
          trigger: 'change'
        }]
      },
      testQuestions: [{
        label: '简单',
        value: 1
      }, {
        label: '一般',
        value: 2
      }, {
        label: '困难',
        value: 3
      }],
      subjectsList: [],
      directorysList: [],
      companyList: [],
      cityList: [],
      areaList: [],
      directionList: [],
      directorys: [],
      tagsList: [],
      questionTypeList: [],
      difficultyList: []
    }
  },
  computed: {},
  watch: {},
  async created () {
    const { data: { items: num1 } } = await subjectsList()
    // console.log(items)
    const { data: { items: num2 } } = await directorysList()
    const { data: { items: num3 } } = await companyList()
    const { data: { items: num4 } } = await tagsList()
    // console.log(data)
    // console.log(num1)
    // console.log(num2)
    this.subjectsList = num1
    this.directorys = num2
    this.companyList = num3
    this.cityList = provinces()
    this.directionList = direction
    this.tagsList = num4
    this.questionTypeList = questionType
    this.difficultyList = difficulty
  },
  mounted () {},
  methods: {
    submitForm () {
      this.$refs.perFormRef.validate(valid => {
        if (!valid) return false
        // TODO 提交表单
      })
    },
    resetForm () {
      this.$refs.perFormRef.resetFields()
    },
    // 失去焦点事件
    onEditorBlur (e) {
      console.log('onEditorBlur: ', e)
    },
    // 获得焦点事件
    onEditorFocus (e) {
      console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange (e) {
      console.log('onEditorChange: ', e)
    },
    getarea () {
      this.areaList = citys(this.cityList[this.formData.city])
    },
    getdirectorys () {
      this.directorysList = this.directorys.filter(t => t.subjectID === this.formData.subject)
    },
    changeFrame () {

    }
  }
}

</script>
<style scoped>
.editor {
  height: 200px;
  margin-bottom: 50px;
}
.citySelect {
  display: flex;
}
.pic {
  position: relative;
  width: 90px;
  height: 60px;
  margin-left: 5px;
  border: 1px dashed #d9d9d9;
}
.icon {
  color: #99999c;
  position: absolute;
  right: 0;
  top: -8px;
  font-size: 16px;
}
</style>
